<template>
  <div class="container">
    <div style="display: flex;width: 100%;border-bottom: #bfd0e2 2px solid">
      <!-- 头部标题-->
      <div class="search-title">Search results for : {{ geneName }}</div>
      <!-- 查询框-->
      <div style="width:60%;display:flex;justify-content: flex-end;">
        <div class="quick-start">Quick Start</div>
        <div style="margin-left: 1%;margin-top: -2px;">
          <el-select ref="selectedSpecies" v-model="list4Param.species" placeholder="Please select" @change="list4" >
            <el-option
              v-for="item in species"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </div>
        <div style="margin-left: 1%;margin-top: -2px;">
          <el-select ref="searchForGene"
            v-model="geneName"
            @keyup.enter.native="changeGene"
            clearable
            filterable
            remote
            reserve-keyword
            placeholder="Search for a gene"
            :remote-method="list5">
            <el-option
              v-for="item in geneList"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </div>
        <el-button type="primary" @click="changeGene" style="margin-left: 20px;height:97%;margin-top: -2px">Search
        </el-button>
      </div>
    </div>
    <!-- differentially expressed -->

    <!-- RNA-seq -->
    <!-- 搜索过滤框-->
    <div style="display:flex;margin-top: 20px">
      <div>
        <div style="font-weight: bold;margin-bottom: 5px;margin-left: 15px">Log<sub>2</sub>FoldChange</div>
        <el-input v-model="rnaSeqParams.log2FoldChange" placeholder="log₂FoldChange"
                  clearable type="number" @keyup.enter.native="getRnaSeqList"></el-input>
      </div>
      <div style="margin-left: 20px">
        <div style="font-weight: bold;margin-bottom: 5px;margin-left: 15px;font-style: italic;">P-value<sub> </sub></div>
        <el-select v-model="rnaSeqParams.pvalue" clearable placeholder="Please select" @change="getRnaSeqList">
          <el-option
            v-for="item in pValue"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div style="margin-left: 20px">
        <div style="font-weight: bold;margin-bottom: 5px;margin-left: 15px;font-style: italic;">P-Adjust<sub> </sub></div>
        <el-select v-model="rnaSeqParams.padj" clearable placeholder="Please select" @change="getRnaSeqList">
          <el-option
            v-for="item in pAdjust"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div style="margin-left: 20px">
        <div style="font-weight: bold;margin-bottom: 5px;margin-left: 15px">Replicates<sub> </sub></div>
        <el-select v-model="rnaSeqParams.replicates" clearable placeholder="Please select" @change="getRnaSeqList">
          <el-option
            v-for="item in replicates"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <!--RNA表格-->
    <div style="width: 100%;margin-top: 20px;font-size: 18px;">
      <!--RNA表格头-->
      <div style="display: flex;background-color: #bfd0e2;">
        <div class="req-title">Found <span style="font-weight: bold">
        {{ rnqFound }}</span> differential expressed
          <span style="font-weight: bold;text-decoration: underline;">RNA-seq</span>
          datasets
        </div>
        <div style="display:flex;margin-left: auto;margin-right: 50px" class="downFileResult" @click="rnaExport">
          <img src="../../../assets/icons/export.png" style="height: 30px;width: 30px;margin-top:15px">
        </div>
      </div>
       <!--RNA表格体-->
      <div>
        <el-table @sort-change="sortChange"
          :data="rnaSeqList"
          :header-cell-style="tableHeaderColor"
          border style="width: 100%;"
          context="center">
          <el-table-column prop="species" fixed label="Species" :show-overflow-tooltip="true" align="center"
                           min-width="60px"
          ></el-table-column>
          <el-table-column prop="title" label="Publication" align="center" min-width="80px" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                      <a :href="'https://doi.org/' +scope.row.doi" target="_blank" style="color: #46a6ff;">{{scope.row.title}}</a>
            </template>
          </el-table-column>
          <el-table-column prop="treatment" label="Treatment" align="center" min-width="70px"></el-table-column>
          <el-table-column prop="comparision" label="Comparision" align="center" min-width="80px"
                           :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column prop="replicates" label="Replicates" align="center" min-width="80px"></el-table-column>
          <el-table-column prop="geneId" label="GeneID" align="center" min-width="60"></el-table-column>
          <el-table-column prop="geneName" label="GeneName" align="center" min-width="70px"></el-table-column>
          <el-table-column prop="log2FoldChange" label="Log₂FoldChange" min-width="120px" align="center" :show-overflow-tooltip="true" :render-header="renderHeader"
                            sortable="custom">
                            <!--:sort-method="(a,b)=>{return a.log2FoldChange - b.log2FoldChange}"-->
          <template slot-scope="scope">
            <span
            style="margin-left: 10px"
            :class="{
              red: scope.row.log2FoldChange > 0
            }"
            class="scop"
            >{{ scope.row.log2FoldChange }}</span
          >
          <i class="el-icon-top" v-if="scope.row.log2FoldChange > 0"
            style="margin-left: 10px"
            :class="{
              red: scope.row.log2FoldChange > 0
            }"></i>
          <i class="el-icon-bottom" v-else-if="scope.row.log2FoldChange < 0"
          style="margin-left: 10px"
            :class="{
              red: scope.row.log2FoldChange > 0
            }"></i>
        </template>
          </el-table-column>
          <el-table-column prop="ctrlTpm" label="Ctrl_TPM" align="center" min-width="70px"></el-table-column>
          <el-table-column prop="expTpm" label="Exp_TPM" align="center" min-width="70px"></el-table-column>
          <el-table-column prop="pvalue" label="P-value" align="center" min-width="60"></el-table-column>
            <!--
          <el-table-column prop="padj" label="Padj" align="center" min-width="40px"></el-table-column>
           -->
             <!--
          <el-table-column label="Browser" align="center" min-width="60"
                               class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="goToBrowser(scope.row.ucscBrowser)"
                    style="margin-left: 0"
                  >JBrowser
                  </el-button>
                  <el-button
                    size="mini"
                    type="text"
                    style="display: none;"
                    @click="goToBrowser(scope.row.washuBrowser)"
                  >WashU Browser
                  </el-button>
                </template>
          </el-table-column>
              -->
          <a></a>
          <el-table-column prop="fileDownPath" label="Download File" align="center" min-width="90">
            <template slot-scope="scope">
              <el-button @click="downLoadFile(scope.row)" type="text">DownLoad</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="rnaSeqTotal"
          :page.sync="rnaSeqParams.pageNum"
          :limit.sync="rnaSeqParams.pageSize"
          :page-sizes="[3, 5, 10]"
          @pagination="getRnaSeqList"
        />
      </div>
    </div>

    <!-- ChIP-seq -->
    <!-- 搜索过滤框-->
    <div style="display:flex;margin-top: 30px;border-top:#bfd0e2 2px solid;padding-top: 10px">
      <div>
        <div style="font-weight: bold;margin-bottom: 5px;margin-left: 15px">FoldChange<sub></sub></div>
        <el-input v-model="chipSeqParams.foldChange" placeholder="FoldChange"
                  clearable type="number" @keyup.enter.native="getChipSeqList"></el-input>
      </div>
      <div style="margin-left: 20px">
        <div style="font-weight: bold;margin-bottom: 5px;margin-left: 15px">Query number<sub></sub></div>
        <el-input v-model="chipSeqParams.queryNumber" placeholder="Query number"
                  clearable type="number" @keyup.enter.native="getChipSeqList"></el-input>
      </div>
      <div style="margin-left: 20px">
        <div style="font-weight: bold;margin-bottom: 5px;margin-left: 15px">-log<sub>10</sub>Pvalue</div>
        <el-select v-model="chipSeqParams.log10Pvalue" clearable placeholder="Please select" @change="getChipSeqList">
          <el-option
            v-for="item in log10Pvalue"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div style="margin-left: 20px">
        <div style="font-weight: bold;margin-bottom: 5px;margin-left: 15px">-log<sub>10</sub>Qvalue</div>
        <el-select v-model="chipSeqParams.log10Qvalue" clearable placeholder="Please select" @change="getChipSeqList">
          <el-option
            v-for="item in log10Qvalue"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div style="width: 100%;margin-top: 20px;font-size: 18px;">
      <div style="display: flex;background-color: #bfd0e2;">
        <div class="req-title">Found <span style="font-weight: bold">{{ chipFound }}</span> targeted
          <span style="font-weight: bold;text-decoration: underline;">ChIP-seq</span>
          datasets
        </div>
        <div style="display:flex;margin-left: auto;margin-right: 50px" class="downFileResult" @click="chipExport">
          <img src="../../../assets/icons/export.png" style="height: 30px;width: 30px;margin-top:15px">
        </div>
      </div>
      <!--CHIP表格体-->
      <div>
        <el-table
          :data="chipSeqList"
          :header-cell-style="tableHeaderColor"
          context="center"
          border style="width: 100%">
          <el-table-column prop="species" label="Species" :show-overflow-tooltip="true" align="center"></el-table-column>
          <el-table-column prop="publications" label="Publication" min-width="80"
                           align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <a :href="'https://doi.org/' +scope.row.doi" target="_blank" style="color: #46a6ff;">{{scope.row.publications}}</a>
            </template>
          </el-table-column>
          <el-table-column prop="treatment" label="Treatment" :show-overflow-tooltip="true" align="center"></el-table-column>
          <el-table-column prop="number" label="Query number" :show-overflow-tooltip="true" align="center"></el-table-column>
          <el-table-column prop="geneId" label="GeneID" :show-overflow-tooltip="true" align="center"></el-table-column>
          <el-table-column prop="geneName" label="GeneName" :show-overflow-tooltip="true" align="center"></el-table-column>
          <el-table-column prop="foldchange" label="FoldChange" :show-overflow-tooltip="true" align="center"></el-table-column>
          <el-table-column prop="log10Pvalue" label="-Log₁₀Pvalue" :show-overflow-tooltip="true" align="center"></el-table-column>
          <el-table-column prop="log10Qvalue" label="-Log₁₀Qvalue" :show-overflow-tooltip="true" align="center"></el-table-column>
          <el-table-column label="Genome View" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="goToBrowser(scope.row.ucscBrowser)"
                    style="margin-left: 0"
                  >JBrowser
                  </el-button>
                  <el-button
                    size="mini"
                    type="text"
                    style="display: none;"
                    @click="goToBrowser(scope.row.washuBrowser)"
                  >WashU Browser
                  </el-button>
                </template>
              </el-table-column>
          <el-table-column prop="fileDownPath" label="Download File" align="center" min-width="95">
            <template slot-scope="scope">
              <el-button @click="downLoadFile(scope.row)" type="text">DownLoad</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="chipSeqTotal"
          :page.sync="chipSeqParams.pageNum"
          :limit.sync="chipSeqParams.pageSize"
          :page-sizes="[3, 5, 10]"
          @pagination="getChipSeqList"
        />
      </div>
    </div>

    <!-- ATAC-seq -->
    <div style="display:flex;margin-top: 30px;border-top:#bfd0e2 2px solid;padding-top: 10px">
    <div>
        <div style="font-weight: bold;margin-bottom: 5px;margin-left: 15px">FoldChange<sub></sub></div>
        <el-input v-model="atacSeqParams.foldChange" placeholder="FoldChange"
                  clearable type="number" @keyup.enter.native="getATACSeqList"></el-input>
    </div>
    <div style="margin-left: 20px">
        <div style="font-weight: bold;margin-bottom: 5px;margin-left: 15px">Query number<sub></sub></div>
        <el-input v-model="atacSeqParams.queryNumber" placeholder="Query number"
                  clearable type="number" @keyup.enter.native="getATACSeqList"></el-input>
    </div>

    <div style="margin-left: 20px">
        <div style="font-weight: bold;margin-bottom: 5px;margin-left: 15px">-log<sub>10</sub>Pvalue</div>
        <el-select v-model="atacSeqParams.log10Pvalue" clearable placeholder="Please select" @change="getATACSeqList">
          <el-option
            v-for="item in log10Pvalue"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
    </div>
    <div style="margin-left: 20px">
        <div style="font-weight: bold;margin-bottom: 5px;margin-left: 15px">-log<sub>10</sub>Qvalue</div>
        <el-select v-model="chipSeqParams.log10Qvalue" clearable placeholder="Please select" @change="getChipSeqList">
          <el-option
            v-for="item in log10Qvalue"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
    </div>
    </div>
    <div style="width: 100%;margin-top: 20px;font-size: 18px;">
      <div style="display: flex;background-color: #bfd0e2;">
        <div class="req-title">Found <span style="font-weight: bold">{{ atacFound }}</span> targeted
          <span style="font-weight: bold;text-decoration: underline;">ATAC-seq</span>
          datasets
        </div>
        <div style="display:flex;margin-left: auto;margin-right: 50px" class="downFileResult" @click="atacExport">
          <img src="../../../assets/icons/export.png" style="height: 30px;width: 30px;margin-top:15px">
        </div>
    </div>
      <!--ATAC表格体-->
      <div>
        <el-table
          :data="atacSeqList"
          :header-cell-style="tableHeaderColor"
          context="center"
          border style="width: 100%">
          <el-table-column prop="species" label="Species" :show-overflow-tooltip="true" align="center"></el-table-column>
          <el-table-column prop="publications" label="Publication" min-width="80"
                           align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <a :href="'https://doi.org/' +scope.row.doi" target="_blank" style="color: #46a6ff;">{{scope.row.publications}}</a>
            </template>
          </el-table-column>
          <el-table-column prop="treatment" label="Treatment" :show-overflow-tooltip="true" align="center"></el-table-column>
          <el-table-column prop="number" label="Query number" :show-overflow-tooltip="true" align="center"></el-table-column>
          <el-table-column prop="geneId" label="GeneID" :show-overflow-tooltip="true" align="center"></el-table-column>
          <el-table-column prop="geneName" label="GeneName" :show-overflow-tooltip="true" align="center"></el-table-column>
          <el-table-column prop="foldchange" label="FoldChange" :show-overflow-tooltip="true" align="center"></el-table-column>
          <el-table-column prop="log10Pvalue" label="-Log₁₀Pvalue" :show-overflow-tooltip="true" align="center"></el-table-column>
          <el-table-column prop="log10Qvalue" label="-Log₁₀Qvalue" :show-overflow-tooltip="true" align="center"></el-table-column>
          <el-table-column label="Genome View" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="goToBrowser(scope.row.ucscBrowser)"
                    style="margin-left: 0"
                  >JBrowser
                  </el-button>
                  <el-button
                    size="mini"
                    type="text"
                    style="display: none;"
                    @click="goToBrowser(scope.row.washuBrowser)"
                  >WashU Browser
                  </el-button>
                </template>
              </el-table-column>
          <el-table-column prop="fileDownPath" label="Download File" align="center" min-width="95">
            <template slot-scope="scope">
              <el-button @click="downLoadFile(scope.row)" type="text">DownLoad</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="chipSeqTotal"
          :page.sync="atacSeqParams.pageNum"
          :limit.sync="atacSeqParams.pageSize"
          :page-sizes="[3, 5, 10]"
          @pagination="getATACSeqList"
        />
      </div>
    </div>
  </div>

</template>

<script>

import { listFactors, getRnaSeqList, getChipSeqList, getATACSeqList,list4 } from '@/api/buss/factors'
import { download } from '@/utils/request'
export default {
  data() {
    return {
      geneList : [],
      species: [
        'All','Aedes aegypti','Aedes albopictus','Anopheles gambiae', 'Anopheles sinensis',
        'Plasmodium berghei','Plasmodium falciparum', 'Schistosoma mansoni', 'Schistosoma japonicum',  'Trypanosoma brucei'
      ],
      replicates : ['YES','NO'],
      pValue :[
        {
          "label":"<0.05",
          "value":"0.05"
        },
        {
          "label":"<0.01",
          "value":"0.01"
        },
        {
          "label":"<0.001",
          "value":"0.001"
        },
        {
          "label":"<0.0001",
          "value":"0.0001"
        }
      ],
      pAdjust :[
        {
          "label":"<0.05",
          "value":"0.05"
        },
        {
          "label":"<0.01",
          "value":"0.01"
        },
        {
          "label":"<0.001",
          "value":"0.001"
        },
        {
          "label":"<0.0001",
          "value":"0.0001"
        }
      ],
      factorsList: [],
      rnaSeqList: [],
      chipSeqList: [],
      atacSeqList: [],

      chipFound: 0,
      rnqFound: 0,
      atacFound: 0,

      // 总条数
      total: 0,
      chipSeqTotal: 0,
      rnaSeqTotal: 0,
      atacSeqTotal: 0,

      rnaSeqParams: {
        geneName: '',
        species:'',
        log2FoldChange: '',
        pvalue: '',
        padj: '',
        replicates: '',
        pageNum: 1,
        pageSize: 3,
        orderParam : 'ascending',//排序规则 ascending ：升，descending：降；为空不排序
        orderProp:''  //排序属性，例如：log2FoldChange；为空不排
      },
      chipSeqParams: {
        geneName: '',
        species:'',
        foldChange: '',
        log10Pvalue: '',
        log10Qvalue: '',
        queryNumber: '',
        pageNum: 1,
        pageSize: 3
      },

      atacSeqParams: {
        geneName: '',
        species:'',
        foldChange: '',
        log10Pvalue: '',
        log10Qvalue: '',
        queryNumber: '',
        pageNum: 1,
        pageSize: 3
      },

      geneName: '',
      downFileParams: {
        //fileDownPath
        extend1: ''
      },
      list4Param: {
        species: 'All',
        index: 'PF3D7_14'
      },
      log10Pvalue : [
        {
          "label":">2",
          "value":"2"
        },
        {
          "label":">3",
          "value":"3"
        },
        {
          "label":">4",
          "value":"4"
        }
      ],
      log10Qvalue : [
        {
          "label":">2",
          "value":"2"
        },
        {
          "label":">3",
          "value":"3"
        },
        {
          "label":">4",
          "value":"4"
        }
      ]
    }
  },
  created() {
    this.list4()
    if (this.geneName) {
      this.getRnaSeqList()
      this.getChipSeqList()
      this.getATACSeqList();
    }
  },
  methods: {

    //自定义表头
    renderHeader(h){
       return h('span', {}, [
        h('span', {}, 'log2FoldChange'),
        h('el-popover', { props: { placement: 'top-start', width: '80', trigger: 'hover', content: 'click to sort' }}, [
           h('i', { slot: 'reference', class:'el-icon-question'}, '')
          ])
       ])
    },

  //sort
  sortChange(column){
    if (column) {
        if (column.prop === 'log2FoldChange' && column.order === 'ascending') {//该字段为升序时向后端传递升序参数，反之降序

         this.rnaSeqParams.orderProp='log2FoldChange'
         this.rnaSeqParams.orderParam='ascending'
        } else if (column.prop === 'log2FoldChange' && column.order === 'descending') {

          this.rnaSeqParams.orderProp='log2FoldChange'
         this.rnaSeqParams.orderParam='descending'
        }
      }
      this.getRnaSeqList();
},

    //sort
    eeesortChange(column,prop,orde) {
      this.rnaSeqList.sort((a,b)=>{return a.log2FoldChange - b.log2FoldChange});
     // this.rnaSeqList = []
      if (column) {
        if (column.prop === 'log2FoldChange' && column.order === 'ascending') {//这里双重判断：该字段为升序时向后端传递升序参数，反之降序
          this.rnaSeqParams.sort = 'log2FoldChange,asc'
        } else if (column.prop === 'log2FoldChange' && column.order === 'descending') {
          this.rnaSeqParams.sort = 'log2FoldChange,desc'
        }

        //this.getRnaSeqList();
      }
    },


    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #bfd0e2;font-size:14px;font-weight: 1000;'
      }
    },
    //联想
    list4(val) {

      this.geneName='';

      this.geneList =['LipL1','KIBRLG','Smp_000020','IGL1','LOC110674348','EWB00_010606','EWB00_010607','IAP8','Smp_003130'];

      if(val==='All')
      {
        this.geneList = ['LipL1','KIBRLG','Smp_000020','IGL1','LOC110674348','EWB00_010606','EWB00_010607','IAP8','Smp_003130'];
      }
      else if(val==='Plasmodium falciparum')
      {
        this.geneList = ['LipL1','SYS1','SUB3','GBP2','RIF','SOC2','PRP24','SEC31','C2AP2','DNA2'];
      }
      else if(val==='Anopheles gambiae')
      {
        this.geneList = ['KIBRLG','IGL1','TTRNA1','SCRB10','GPROAR1','CPR130','HPX5','NFI','CPR129','IAP8'];
      }
      else if(val==='Schistosoma mansoni')
      {
        this.geneList = ['Smp_000020','Smp_000030','Smp_000040','Smp_000050','Smp_000070','Smp_000075','Smp_000080','Smp_003130','Smp_003140','mp_003190'];
      }
      else if(val==='Aedes aegypti')
      {
        this.geneList = ['LOC110674347','LOC110674348','LOC5575839','LOC5575838','LOC5575837','LOC110674706','LOC5575836','LOC5575835','LOC5575834','LOC5575833'];
      }
      else if(val==='Schistosoma japonicum')
      {
        this.geneList = ['EWB00_010604','EWB00_010605','EWB00_010606','EWB00_010607','EWB00_010608','EWB00_010609','EWB00_010610','EWB00_010611','EWB00_010612','EWB00_010613'];
      }
      else if(val==='Anopheles sinensis')
      {
        this.geneList = ['ZHAS_00000004','ZHAS_00000005','ZHAS_00000009','ZHAS_00000013','ZHAS_00000014','ZHAS_00000043','ZHAS_00000046','ZHAS_00000047','ZHAS_00000070','ZHAS_00000075'];
      }
      else if(val==='Aedes albopictus')
      {
        this.geneList = ['GeneID:109400916','GeneID:109400934','GeneID:109400939','GeneID:109400938','GeneID:109418320','GeneID:109418322','GeneID:109418323','GeneID:109428104','GeneID:109419349','GeneID:115262045'];
      }
      else if(val==='Plasmodium berghei')
      {
        this.geneList = ['RAB1b','DPCK','OGG1','GLO1','GPROAR1','NAPRT','MCM3','ALP2a','UBA4','MED14'];
      }
      else if(val==='Trypanosoma brucei')
      {
        this.geneList = ['TB927.1.05','TB927.1.10','TB927.1.20','TB927.1.30','TB927.1.40','TB927.1.50','TB927.1.60','TB927.1.70','TB927.1.80','TB927.1.100'];
      }


      //this.geneList = [];
      //this.geneName = '';
      //list4(this.list4Param).then(response => {
        //if(response.code === 200){
          //let msg = JSON.parse(response.msg);
          //this.geneList = msg.data;
        //}
      //})
    },

    list5(param) {
      this.geneName = param;
      this.list4Param.index = param;
      console.log(this.list4Param)
      list4(this.list4Param).then(response => {
        if(response.code === 200){
          let msg = JSON.parse(response.msg);
          this.geneList = msg.data;
        }
      })
    },

    changeGene() {
      if (this.geneName) {
        this.rnaSeqParams.geneName = this.geneName
        this.chipSeqParams.geneName = this.geneName
        this.atacSeqParams.geneName=this.geneName

        let nowSelectedSpecies=this.$refs.selectedSpecies.selected.label

        if(nowSelectedSpecies!="All"){
        this.rnaSeqParams.species=nowSelectedSpecies
        this.chipSeqParams.species=nowSelectedSpecies
        this.atacSeqParams.species=nowSelectedSpecies
        }
        this.getRnaSeqList()
        this.getChipSeqList()
        this.getATACSeqList();
      }
    },
    //查询rnaSeq信息
    getRnaSeqList() {
      console.log(this.rnaSeqParams)
      getRnaSeqList(this.rnaSeqParams).then(response => {
        this.rnaSeqList = response.rows
        this.rnaSeqTotal = response.total
        this.rnqFound = response.total
      })
    },
    //查询表格信息
    getChipSeqList() {
      getChipSeqList(this.chipSeqParams).then(response => {
        this.chipSeqList = response.rows
        this.chipSeqTotal = response.total
        this.chipFound = response.total
      })
    },
    //查询atac信息
    getATACSeqList() {
      getATACSeqList(this.atacSeqParams).then(response => {
        this.atacSeqList = response.rows
        this.atacSeqTotal = response.total
        this.atacFound = response.total
      })
    },

    changeFn(value) {
      if (value.length > 30) {
        this.geneName = ''
      }
    },

    downLoadFile(value) {
      console.log(value)
      let fileDownPath = value.fileDownPath
      let fileName = value.fileName + '.xlsx'
      //这是文件路径参数，因为download函数需要传三个参数，这是第二个参数
      let params = {
        resource: fileDownPath
      }
      /** request里面的download下载函数 */
      download('/common/download/resource', params, fileName)
      console.log('文件名')
      console.log('value')
    },
    rnaExport(){
      this.download('buss/epiparaInfo/list2Export', {
        ...this.rnaSeqParams
      }, `rnaSeq_${new Date().getTime()}.xlsx`)
    },
    chipExport(){
      this.download('buss/chipSeq/list2Export', {
        ...this.chipSeqParams
      }, `chipSeq_${new Date().getTime()}.xlsx`)
    },
    atacExport(){
      this.download('buss/atacSeq/list2Export', {
        ...this.atacSeqParams
      }, `atacSeq_${new Date().getTime()}.xlsx`)
    },
  }
}



</script>

<style scoped>

.quick-start {
  font-size: 25px;
  font-weight: bold;
  color: #2185d0;
  margin-top: 0;
}

.req-title {
  height: 50px;
  padding-left: 20px;
  line-height: 3;
}

.search-title {
  color: #000000;
  font-size: 26px;
  width: 40%;
  padding-top: 10px;
}

.container {
  margin: 100px auto 200px;;
  width: 80%;
  min-width: 1350px;
}

.downFileResult:hover {
  cursor: pointer;
}


.el-table th.el-table__cell > .cell::before{
		    content: "";

	transform:rotate(45deg);

		  border-top: 20px solid red;
		      border-right: 20px solid transparent;

	}

  .el-icon-bottom{
  color: green;
}
.el-icon-top{
  color: green;
}
.scop{
  color: green;
}
.red {
  color: #f00;
}

</style>
